{include file="public/head"}
<link rel="stylesheet" type="text/css" href="__STATIC__/css/lottery/common.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/lottery/index.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/lottery/phone.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/lottery/picture.css"/>
<script type="text/javascript" src="__STATIC__/js/jquery-2.1.0.js"></script>
<script src="__STATIC__/js/phone.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/js/npmVue.js"></script>
<body>
<div class="header">
	<ul class="">
		<li>
			<p><a href="index.html">首页</a></p>
		</li>
		<!--<li>
            <p><a href="manage.html">后台管理</a></p>
        </li>-->
		<li>
			<p><a href="forecast.html">我的预测</a></p>
		</li>
		<!--<li>
            <p><a href="forecast_manage.html">预测后台管理</a></p>
        </li>-->
		<li>
			<p><a href="analyzePic.html">幻圆图</a></p>
		</li>
		<li>
			<h2>幻圆图比较</h2>
		</li>
	</ul>
</div>
<dl class="analyze">
	<dt>
		<p>红球</p>
		<p>1、选单个号码时，上期某个号码在同一圆环上左旋、右转得到下期奖号，或以某轴线对称折叠得到下期单个奖号。当然，同一轴内敛、外延出现奖号的几率也很大。</p>
		<p>2、同一轴线（或同一圆环）上不应超过4个红球，通常最多只考虑开出3个即可。</p>
	</dt>
	<dd>
		<p>蓝球</p>
		<p></p>
	</dd>
	<div class="randomBtn">
		随机
	</div>
</dl>
<ul class="container">

	<li class="redblank">
		<div class="big4">
			<dd>11</dd><dd>30</dd><dd>26</dd><dd>25</dd><dd>8</dd><dd>14</dd><dd>13</dd><dd>9</dd>
		</div>
		<div class="big3">
			<dd>31</dd><dd>4</dd><dd>16</dd><dd>10</dd><dd>28</dd><dd>2</dd><dd>21</dd><dd>24</dd>
		</div>
		<div class="big2">
			<dd>19</dd><dd>12</dd><dd>3</dd><dd>15</dd><dd>5</dd><dd>20</dd><dd>33</dd><dd>29</dd>
		</div>
		<div class="big1">
			<dd>7</dd><dd>22</dd><dd>23</dd><dd>18</dd><dd>27</dd><dd>32</dd><dd>1</dd><dd>6</dd>
		</div>
		<dd class="center">17</dd>
	</li>
	<table class="blueblank" border="" cellspacing="0" cellpadding="0">
		<tr><td>13</td><td>9</td><td>5</td><td>1</td></tr>
		<tr><td>14</td><td>10</td><td>6</td><td>2</td></tr>
		<tr><td>15</td><td>11</td><td>7</td><td>3</td></tr>
		<tr><td>16</td><td>12</td><td>8</td><td>4</td></tr>
	</table>
	<script type="text/javascript">
        var redblankBtn = false
        $(".redblank dd").on("click",function(){
            if(redblankBtn){
                $(this).css({"background":"#fff","color":"#000"})
                redblankBtn = false
            }else{
                $(this).css({"background":"red","color":"#fff"})
                redblankBtn = true
            }
        })
        var blueblankBtn = false
        $(".blueblank td").on("click",function(){
            if(blueblankBtn){
                $(this).css({"background":"#fff","color":"#000"})
                blueblankBtn = false
            }else{
                $(this).css({"background":"blue","color":"#fff"})
                blueblankBtn = true
            }
        })

        var randomArray = new Array(6);
        $(".randomBtn").on("click",function(){
            redRandom()
        })
        function redRandom(){
            for(var i=0;i<6;i++){
                randomArray[i] = Math.ceil(Math.random()*32)
                if(i>0){

                }
            }
            console.log(randomArray)
        }
	</script>
	<div class="lastthree">

	</div>
	<div class="query">

	</div>
</ul>

<!--<li>
        <div class="big4">
            <dd>11</dd><dd>30</dd><dd>26</dd><dd>25</dd><dd>8</dd><dd>14</dd><dd>13</dd><dd>9</dd>
        </div>
        <div class="big3">
            <dd>31</dd><dd>4</dd><dd>16</dd><dd>10</dd><dd>28</dd><dd>2</dd><dd>21</dd><dd>24</dd>
        </div>
        <div class="big2">
            <dd>19</dd><dd>12</dd><dd>3</dd><dd>15</dd><dd>5</dd><dd>20</dd><dd>33</dd><dd>29</dd>
        </div>
        <div class="big1">
            <dd>7</dd><dd>22</dd><dd>23</dd><dd>18</dd><dd>27</dd><dd>32</dd><dd>1</dd><dd>6</dd>
        </div>
        <dd class="center">17</dd>
    </li>-->
</body>
{include file="public/foot"}
<script type="text/javascript">
    var forecastData = [];
    $.ajax({
        type:"post",
        url: "/admin/Double/fquery",
        async:true,
        dataType:"json",
        success:function(data){
            console.log('fquery',data)
            forecastData = data.data
        }
    });
    $.ajax({
        type:"post",
        url: "/admin/Double/query",
        async:true,
        dataType:"json",
        success:function(data){
            console.log('query',data)
            $.each(data.data, function(index,value) {
                value.fred = []
                value.fblue = []
                $.each(forecastData, function(ind,val) {
                    if(val.period == value.period){
                        value.fred = val.fred
                        value.fblue = val.fblue
                    }
                });
            });
            console.log(data.data)
            $.each(data.data, function(inds,vals) {
                var str = '<li class="order'+(inds+1)+'">'+
                    '<p id="' + vals.period + '">' + vals.period + '</p>'+
                    '<div class="big4">'+
                    '<dd>11</dd><dd>30</dd><dd>26</dd><dd>25</dd><dd>8</dd><dd>14</dd><dd>13</dd><dd>9</dd>'+
                    '</div>'+
                    '<div class="big3">'+
                    '<dd>31</dd><dd>4</dd><dd>16</dd><dd>10</dd><dd>28</dd><dd>2</dd><dd>21</dd><dd>24</dd>'+
                    '</div>'+
                    '<div class="big2">'+
                    '<dd>19</dd><dd>12</dd><dd>3</dd><dd>15</dd><dd>5</dd><dd>20</dd><dd>33</dd><dd>29</dd>'+
                    '</div>'+
                    '<div class="big1">'+
                    '<dd>7</dd><dd>22</dd><dd>23</dd><dd>18</dd><dd>27</dd><dd>32</dd><dd>1</dd><dd>6</dd>'+
                    '</div>'+
                    '<dd class="center">17</dd>'+
                    '</li>' +
                    '<table class="table'+(inds+1)+'" border="" cellspacing="0" cellpadding="0">' +
                    '<tr><td>13</td><td>9</td><td>5</td><td>1</td></tr>' +
                    '<tr><td>14</td><td>10</td><td>6</td><td>2</td></tr>' +
                    '<tr><td>15</td><td>11</td><td>7</td><td>3</td></tr>' +
                    '<tr><td>16</td><td>12</td><td>8</td><td>4</td></tr>' +
                    '</table>'
                $(".query").append(str)
                $.each($(".order"+(inds+1)).find("dd"), function(index,value) {
                    $.each(vals.fred, function(ind,val) {
                        if(value.innerHTML==val){
                            $(value).css({"background":"#0000ff","color":"#fff"})
                        }
                    });
                    $.each(vals.red, function(ind,val) {
                        if(value.innerHTML==val){
                            $(value).css({"background":"#ff0000","color":"#fff"})
                        }
                        $.each(vals.fred, function(i,v) {
                            if(value.innerHTML==val){
                                if(v == val){
                                    $(value).css({"background":"#00ff00","color":"#fff"})
                                }
                            }
                        });
                    });

                });
                $.each($('.table'+(inds+1)).find('td'), function(index,value) {
//						console.log(value)
                    if(value.innerHTML==vals.blue){
                        $(value).css({"background":"#ff0000","color":"#fff"})
                    }
                    if(value.innerHTML==vals.fblue){
                        $(value).css({"background":"#0000ff","color":"#fff"})
                    }
                });
            });
            drowLine($('.container li'),4)
            everyNumber($('.big4'),8)
            everyNumber($('.big3'),8)
            everyNumber($('.big2'),8)
            everyNumber($('.big1'),8)
            $(".everyTr .modifyBtn").on("click",function(){
                modify(this)
            })
            $(".everyTr .deletesBtn").on("click",function(){
                deletes(this)
            })

            //最后三组数据
            var strLast = '<li class="lastThree">'+
                '<p>最后三期</p>'+
                '<div class="last4">'+
                '<dd>11</dd><dd>30</dd><dd>26</dd><dd>25</dd><dd>8</dd><dd>14</dd><dd>13</dd><dd>9</dd>'+
                '</div>'+
                '<div class="last3">'+
                '<dd>31</dd><dd>4</dd><dd>16</dd><dd>10</dd><dd>28</dd><dd>2</dd><dd>21</dd><dd>24</dd>'+
                '</div>'+
                '<div class="last2">'+
                '<dd>19</dd><dd>12</dd><dd>3</dd><dd>15</dd><dd>5</dd><dd>20</dd><dd>33</dd><dd>29</dd>'+
                '</div>'+
                '<div class="last1">'+
                '<dd>7</dd><dd>22</dd><dd>23</dd><dd>18</dd><dd>27</dd><dd>32</dd><dd>1</dd><dd>6</dd>'+
                '</div>'+
                '<dd class="center">17</dd>'+
                '</li>' +
                '<table class="lastTable" border="" cellspacing="0" cellpadding="0">' +
                '<tr><td>13</td><td>9</td><td>5</td><td>1</td></tr>' +
                '<tr><td>14</td><td>10</td><td>6</td><td>2</td></tr>' +
                '<tr><td>15</td><td>11</td><td>7</td><td>3</td></tr>' +
                '<tr><td>16</td><td>12</td><td>8</td><td>4</td></tr>' +
                '</table>'


            $(".lastthree").append(strLast)
            drowLine($('.container li'),4)
            everyNumber($('.last4'),8)
            everyNumber($('.last3'),8)
            everyNumber($('.last2'),8)
            everyNumber($('.last1'),8)
            $.each(data.data.slice(0,3), function(inds,vals) {
//					console.log(vals)
                $.each($(".lastThree dd"), function(ind,value) {
                    $.each(vals.red, function(ind,val) {
                        if(value.innerHTML==val){
                            $(value).css({"background":"#ff0000","color":"#fff"})
                        }
                    });
                });
                $.each($('.lastTable').find('td'), function(index,value) {
                    if(value.innerHTML==vals.blue){
                        $(value).css({"background":"#ff0000","color":"#fff"})
                    }
                });
            });
        }
    });

    function drowLine(warp,total){
        var line = '<dt></dt>'
        var deg = 180/total
        var firstDeg = 0;
        for(var i=0;i<total;i++){
            warp.append(line)
        }
        $.each(warp.find('dt'), function(ind,val) {
            firstDeg += deg;
            $(val).css("transform","rotate(" + firstDeg + "deg)")
        });
    }
    function everyNumber(warp,length){
        var r = 0;
        var deg = 360/length
        var firstDeg = 0;
        var lastStr = warp[0].className.substring(warp[0].className.split("").length-1,warp[0].className.split("").length)
        if(lastStr == '4'){
            r = 200
        }
        if(lastStr == '3'){
            r = 150
        }
        if(lastStr == '2'){
            r = 100
        }
        if(lastStr == '1'){
            r = 55
        }
        $.each(warp.find("dd"), function(ind,val) {
            var angle = deg*ind*(Math.PI/180)
            var left = Math.cos(angle)*r+r
            var top = Math.sin(angle)*r+r
            $(val).css({"top":top + "px","left":left + "px"})
            firstDeg += deg
        });
    }

</script>